import React,{useState,useEffect} from 'react'
import { Table} from 'antd'
import Axios from 'axios'
const columns = [
  {
    title:'ID',
    dataIndex:'id'
  },
  {
    title:'用户名',
    dataIndex:'username'
  },
  {
    title:'性别',
    dataIndex:'gender',
    render: (col,{gender}) =>{
      if(gender === 1) {
        return '男'
      }else {
        return '女'
      }
    }
  }
]
const UserManage = () => {
  const [data,setData] = useState()
  const [total,setTotal] = useState(4)
  useEffect(()=>{
    Axios.get('/users',{
      params:{
        _page:1,
        _limit:4
      }
    }).then(response => {
      const {data,headers} = response
      setTotal(parseInt(headers['x-total-count']))
      setData(data)
    })
  },[])
  return (
    <Table columns={columns} dataSource={data} rowKey='id'
    pagination={{
      defaultPageSize:4,
      total,
      onChange:(page, pageSize)=>{
        Axios.get('/users',{
          params:{
            _page:page,
            _limit:pageSize
          }
        }).then(response => {
          const {data} = response
          setData(data)
        })
      }
    }}
    />
  )
}

export default UserManage
